<template>
    <div>
        <web-header show="group" />
        <div class="box_a">
            <div class="content">
                <div class="pic">
                    <img :src="`https://admin.hqx.com.cn/Public/Uploads/${data.pic}`" />
                </div>
                <div class="biati" style="font-size: 20px; font-weight: bold; padding: 30px 0;">基地介绍</div>
                <div class="text" v-html="data.content"></div>
            </div>
            <aside>
                <dl class="big_title">
                    <!-- <dd>{{$type.title}}-{{data.title}}</dd> -->
                    <dd>{{ dictionaries[data.type3] }}-{{ data.title }}</dd>

                </dl>
                <div class="info">{{data.intro}}</div>
                <!-- <div class="key">关键词：课程介绍</div> -->
                <div class="title">{{dictionaries[data.type3]}}-团建基地</div>
                <ul class="pro_list">
                    <!-- <volist name="other" id="rs">
                        <li><a target="_blank" href="/group/address/{$rs.id}.html"><img
                                    src="https://admin.hqx.com.cn/Public/Uploads/{$rs.pic}" />{$rs.title}</a></li>
                    </volist> -->
                    <li v-for="rs in list" :key="rs.id">
                        <a target="_blank" :href="`/group/theme/${rs.id}`">
                            <img :src="`https://admin.hqx.com.cn/Public/Uploads/${rs.pic}`" />
                            {{ rs.title }}
                        </a>
                    </li>
                </ul>
            </aside>
        </div>
        <web-footer />
    <back-top />
    </div>
</template>

<script setup>


import { ref, onMounted, computed } from "vue";
import { group_items, group_details } from "@/api/travel.js";
import { useRoute } from "vue-router";
import groupProgramme from "@/components/swiper/groupProgramme.vue";
const route = useRoute();

// 后续内容变多做懒加载
let data = ref({});
let list = ref([]);

const dictionaries = {
    86: '广州',
    87: '深圳',
    88: '河源',
    89: '清远',
    90: '惠州',
    91: '东莞',
    92: '佛山',
}

onMounted(async () => {
    // 详情
    let result = await group_details({ id: route.params.id });
    data.value = result.data;
    data.value.banner = result.data.banner.split("|").filter((item) => item.trim()).map(item => `https://admin.hqx.com.cn/Public/Uploads/${item}`)
    // 侧边推荐栏
    let res = await group_items({
        ctype: 72,
        type3: data.value.type3,
        page: 1,
        limit: 3,
    });
    list.value = res.data;
});

</script>

<style lang="scss" scoped>
@import "../../css/main_group_address.css";
</style>
